import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import './chartdemo.css';
import { Layout, Input, Carousel, Button, Statistic, Checkbox, Row, Col, Popover } from 'antd';
import { NavLink, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { withRouter } from './withRouter'

function Chartdemo (props) {
  const value = "输入";
  const [enterValue,setValue] = useState(value);
  const navigate = useNavigate();
  const { Header, Content, Footer } = Layout;
  const content = (
    <div>
      <p>我们是2022暑期项目实训G07小组</p>
    </div>
  );
  const { Search } = Input;
  const picStyle = {
    textAlign: 'center',
    height: '100%',
    width: '100%',
    background: '#364d79',
    overflow: 'hidden',
  }

  const mysearch = () => {
      console.log(enterValue);
      // let senddata = Object();
      // senddata["text"] = this.state.inputbox_text;
      // senddata["name"] = this.state.keywords;
      var keywords = []
      keywords = enterValue.split(/[\s\n]/)
      console.log(keywords)
      console.log(props)
      navigate("/primary_search/advance",{state: {keys: enterValue}});
  }

  return (
    <div>
      <Layout className="mylayout">
        <Header className='my_header'>
          <div className='hd'>
            <p>首页</p>
          </div>
        </Header>
        <Content className="content_css">
          <div className="background">
            <div style={{
              width: '100%',
              height: '18vh'
            }}></div>
            <div style={{
              display: 'flex',
              justifyContent: 'center'
            }}>
              <h1 className="title">陶器：</h1>
              <h1 className='title2'>陶瓷垂直搜索引擎</h1>
            </div>
            <div style={{
              width: '100%',
              color: 'white',
              fontSize: '20px',
              justifyContent: 'center'
            }}>
              <div>
                <Popover content={content} title="Hello大家好">
                  <p style={{
                    color: 'lightblue'
                  }}>关于我们</p>
                </Popover>
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'center'
            }}>
            <Search
              size="large"
              placeholder={enterValue}
              onChange={(e)=>{setValue(e.target.value)}}
              onSearch={mysearch}
              style={{
                width: 500,
                height: 600,
                paddingTop: '1%'
              }}
            />
            <div style={{
              paddingTop: '1%',
              marginLeft: '2%'
            }}>
              <Button style={{
                width: '90px',
                height: '40px',
                backgroundColor: 'white',
                textAlign: 'center'
              }}><NavLink to={"/primary_search/advance"}>高级搜索</NavLink></Button>
            </div>
            <div style={{
              paddingTop: '1%',
              marginLeft: '2%'
            }}>
              <Button style={{
                width: '90px',
                height: '40px',
                backgroundColor: 'white',
                textAlign: 'center'
              }}><NavLink to={"/expert"}>图表分析</NavLink></Button>
            </div>
            </div>
          </div>
        </Content>
      </Layout>
      <div className='mycar'>
        <Carousel autoplay  effect="fade">
          <div>
              <img src='https://www.dpm.org.cn/Uploads/Picture/2022/05/31/s629572aa7c909.jpg' style={picStyle} alt='#'></img>
          </div>
          <div>
            <img src='https://www.dpm.org.cn/Uploads/Picture/2022/06/30/s62bcfb5bd07f7.jpg' style={picStyle}></img>
          </div>
          <div>
            <img src='https://www.dpm.org.cn/Uploads/Picture/2022/06/30/s62bcfab13c31f.jpg' style={picStyle}></img>
          </div>
          <div>
            <img src='https://www.dpm.org.cn/Uploads/Picture/2022/05/31/s62956e01c3cd8.jpg' style={picStyle}></img>
          </div>
        </Carousel>
      </div>
    </div>
  )
}

export default withRouter(Chartdemo);